<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul {
          list-style: none;
          padding: 0; 
      }
      .da li{
          padding-left: 20px;
          background:url(+.png) no-repeat;
          background-position:0 4;
      }
      .da .de{
          padding-left: 20px;
          background:url(-.png) no-repeat;
          background-position:0 4;
      }
      .db .dd{
          padding-left: 20px;
          background:url(+.png) no-repeat;
          background-position:0 4;
      }
      .db{
          display: none;
      }
      .db li{
          background:url(leaf.png) no-repeat;
      }
      a{
        text-decoration: none;
        color: black;
      }
      .dc>a:hover+ul{
          display: block;
      }
      .de>a:hover+ul{
          display: block;
      }
    

      
    </style>
</head>
<body>
    <ul class="da">
        <li class="de"><a href="#">首页</a>
            <ul class="db">
                <li><a href="#">顶部导航</a></li>
                <li><a href="#">横幅</a></li>
                <li class="dd"><a href="#">推荐产品</a>
                    <ul>
                        <li><a href="#">篮球</a></li>
                        <li><a href="#">羽毛球</a></li>
                        <li><a href="#">足球</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="dc"><a href="#">关于 </a>
            <ul class="db">
                <li><a href="#">企业简介</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">领导致辞</a></li>
            </ul>
        </li>
        <li class="dc"><a href="#">用户</a>
            <ul class="db">
                <li><a href="#">普通用户</a></li>
                <li><a href="#">高级用户</a></li>
                <li><a href="#">VIP用户</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>